import {CCard} from '@/components/card'
import {ParamIcon, ParamStatus} from '@/components/image'
import {CnBoldSpan, CnNormalSpan} from '@/components/text'
import useEaseInOut from '@/hooks/easeInOut'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {toSingleParam} from '@/libs/pageRedirect'
import {str2num} from '@/libs/toolkit'
import {PropType} from 'vue'

// const CardTitle = defineComponent({
//   setup(props, ctx) {
//     return () => (
//       <div class='h-24 flex items-center'>
//         <ParamIcon imgName='pH' class='opacity-25 mr-6'></ParamIcon>
//         <CnBoldSpan class='text-xText text-16'>pH</CnBoldSpan>
//         <CnNormalSpan class='text-12 flex-1 mx-16'>2022-09-02 15:45:22</CnNormalSpan>
//         <ParamStatus class='w-16 h-16' status='偏高'></ParamStatus>
//       </div>
//     )
//   }
// })

// const CardHeader = defineComponent({
//   props: {
//     paramValue: Number
//   },
//   setup(props, ctx) {
//     const {count, countStart} = useEaseInOut({
//       startVal: 0,
//       endVal: props.paramValue || 0,
//       decimals: 2
//     })

//     onMounted(() => {
//       // countStart()
//       // props.paramValue && countStart({ endVal: props.paramValue })
//     })

//     return () => (
//       <div class='mt-20 pl-8 flex items-end align-medium'>
//         <CnBoldSpan class='text-30 mr-6 h-32 flex justify-center items-center'>
//           {count.value}
//         </CnBoldSpan>
//         <CnNormalSpan class='text-12 mr-16'>℃</CnNormalSpan>
//         <IconImg imgName='arrow-up-success' class='w-12 h-12 my-3 mr-3 animate-bounce'></IconImg>
//         <CnNormalSpan class='text-12'>2%</CnNormalSpan>
//       </div>
//     )
//   }
// })

// const CardBody = defineComponent({
//   setup(props, ctx) {
//     return () => (
//       <div class='mt-20 h-21'>
//         <CnNormalSpan class='mr-16'>偏高时段</CnNormalSpan>
//         <CnNormalSpan class='mr-38 text-danger'>1%</CnNormalSpan>
//         <CnNormalSpan class='mr-16'>偏低时段</CnNormalSpan>
//         <CnNormalSpan class='text-danger'>1%</CnNormalSpan>
//       </div>
//     )
//   }
// })

// const CardFooter = defineComponent({
//   props: {
//     paramName: {
//       type: String,
//       required: true
//     }
//   },
//   setup(props, ctx) {
//     const {route} = useGlobalAPI()

//     return () => (
//       <div class='mt-33'>
//         <CnNormalSpan
//           class='text-12 float-right cursor-pointer'
//           style={{
//             color: '#1758F0 !important'
//           }}
//           onClick={() => {
//             const devId = route.query.devId as string
//             devId && toSingleParam({devId: devId, paramName: props.paramName})
//           }}
//         >
//           查看指标
//         </CnNormalSpan>
//       </div>
//     )
//   }
// })

export const ParamCard = defineComponent({
  props: {
    paramData: {
      type: Object as PropType<ParamData>,
      required: true
    }
  },
  setup(props, ctx) {
    const {route} = useGlobalAPI()

    const endVal = str2num(props.paramData.paramValue || '') || 0
    const {count} = useEaseInOut({
      startVal: 0,
      endVal,
      decimals: 2
    })

    return () => (
      <CCard
        title={props.paramData.paramName}
        showTitle={false}
        class='w-full h-218 p-24 rounded-4 bg-white overflow-hidden'
      >
        <div class='w-full h-24 flex items-center'>
          <ParamIcon imgName={props.paramData.paramName} class='opacity-25 mr-6'></ParamIcon>
          <CnBoldSpan class='text-xText text-16'>{props.paramData.paramName}</CnBoldSpan>
          <CnNormalSpan class='text-12 flex-1 mx-16'>{props.paramData.checkTime}</CnNormalSpan>
          <ParamStatus class='w-16 h-16' status={props.paramData.paramStatus}></ParamStatus>
        </div>
        <div class='mt-20 pl-8 flex items-end align-medium'>
          <CnBoldSpan class='text-30 mr-6 h-32 flex justify-center items-center'>
            {count.value}
          </CnBoldSpan>
          <CnNormalSpan class='text-12'>{props.paramData.paramUnit}</CnNormalSpan>
        </div>
        <div class='mt-20 h-21 grid grid-cols-3 gap-x-16'>
          <div>
            <CnNormalSpan class='mr-8'>适宜占比</CnNormalSpan>
            <CnNormalSpan class='text-success'>{props.paramData.shiyiRatio}%</CnNormalSpan>
          </div>
          <div>
            <CnNormalSpan class='mr-8'>偏高占比</CnNormalSpan>
            <CnNormalSpan class='text-danger'>{props.paramData.piangaoRatio}%</CnNormalSpan>
          </div>
          <div>
            <CnNormalSpan class='mr-8'>偏低占比</CnNormalSpan>
            <CnNormalSpan class='text-warning'>{props.paramData.piandiRatio}%</CnNormalSpan>
          </div>
        </div>
        <div class='mt-33'>
          <CnNormalSpan
            class='text-12 float-right cursor-pointer px-8 py-4 rounded-4 bg-primary'
            style={{
              color: '#fff !important'
            }}
            onClick={() => {
              const devId = route.query.devId as string
              devId && toSingleParam({devId: devId, paramName: props.paramData.paramName})
            }}
          >
            查看历史
          </CnNormalSpan>
        </div>
      </CCard>
    )
  }
})
